import {defineComponent, onMounted, reactive, ref} from "vue";
import "./index.less";
import {ElButton, ElCard, ElMessage, ElPagination, ElPopconfirm, ElSpace, ElTable, ElTableColumn} from "element-plus";
import {Page} from "@/types/Page";
import {deleteAuthorizationCodeById, pageQueryAuthorizationCode} from "@/service/security/AuthorizationCodeController";
import {enums} from "@/utils/enums";

const AuthorizationCode = defineComponent(() => {

  const load = ref<boolean>(false);

  const form = ref<any>({
  });

  const dataList = ref<any[]>([]);

  const page = reactive<Page>({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  onMounted(() => {
    request();
  });

  const handleDelete = async (id: number) => {
    console.log("删除", id);
    const res: any = await deleteAuthorizationCodeById(id);
    if (res.code === "000000") {
      ElMessage.success("删除成功");
      request();
    }
  }

  const request = async () => {
    load.value = true;
    const res = await pageQueryAuthorizationCode({
      ...page,
      ...form.value,
    });
    dataList.value = res.data.records || [];
    page.total = res.data.total || 0;
    load.value = false;
  }

  const handleSizeChange = (pageSize: number) => {
    page.pageSize = pageSize;
    request();
  }

  const handleCurrentChange = (current: number) => {
    page.current = current;
    request();
  }

  return () => (
    <ElCard class="custom-card">
      <div class="search-box">
        <div class="search-button-box">
          <ElButton
            type="primary"
            onClick={request}
          >
            搜索
          </ElButton>
          <ElButton>
            重置
          </ElButton>
        </div>
      </div>
      <div class="table-box">
        <ElTable
          border
          loading={load.value}
          data={dataList.value}
        >
          <ElTableColumn
            type="index"
            label="序号"
            width={80}
            align="center"
          />
          <ElTableColumn
            label="客户端"
            prop="clientId"
            align="center"
          />
          <ElTableColumn
            label="授权码"
            prop="authorizationCode"
            align="center"
          />
          <ElTableColumn
            label="重定向地址"
            prop="redirectUri"
            align="center"
          />
          <ElTableColumn
            label="授权范围"
            prop="scope"
            align="center"
          />
          <ElTableColumn
            label="状态"
            prop="status"
            align="center"
            v-slots={{
              default: (scope) => {
                const find = enums.AuthorizationCodeStatus.find(item => item.value === scope.row.status);
                return find?.label || "-";
              },
            }}
          />
          <ElTableColumn
            label="创建时间"
            prop="createTime"
            align="center"
          />
          <ElTableColumn
            label="过期时间"
            prop="expireAt"
            align="center"
          />
          <ElTableColumn
            label="备注"
            prop="remark"
            align="center"
          />
          <ElTableColumn
            prop="option"
            label="操作"
            align="center"
            width={200}
            v-slots={{
              default: (scope) => (
                <ElSpace>
                  <ElPopconfirm
                    title="确定删除此授权码吗？"
                    onConfirm={() => handleDelete(scope.row.id)}
                    v-slots={{
                      reference: (scope) => (
                        <a style={{ color: "red" }}>
                          删除
                        </a>
                      ),
                    }}
                  />
                  <ElPopconfirm
                    title="确定让此授权码失效吗？"
                    onConfirm={() => handleDelete(scope.row.id)}
                    v-slots={{
                      reference: (scope) => (
                        <a>
                          失效
                        </a>
                      ),
                    }}
                  />
                </ElSpace>
              ),
            }}
          />
        </ElTable>
      </div>
      <div class="page-box">
        <ElPagination
          currentPage={page.current}
          pageSize={page.pageSize}
          pageSizes={[10, 20, 30, 50]}
          size="default"
          layout="total, sizes, prev, pager, next, jumper"
          total={page.total}
          onSizeChange={handleSizeChange}
          onCurrentChange={handleCurrentChange}
        />
      </div>
    </ElCard>
  );

});

export default AuthorizationCode;
